<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link href="../css/mui.min.css" rel="stylesheet" />
	<link rel="stylesheet" href="../css/complain.css" />
</head>

<body class="gray">
	<div class="mui-content loading" id="vueMain">
		<ul class="mui-table-view ords" style="margin-top: 0;">
	        <li class="mui-table-view-cell">
	            <span>订单号</span>：{{list.order_no}}
	        </li>
	   </ul>
	   <div class="text">
	   		<textarea name="" rows="" cols="" v-model="list.content" placeholder="请写下您的投诉内容"></textarea>
	   		<p style="text-align: right;">500</p>
	   </div>
	   <div class="mui-row tis">
	   		<span>上传凭证</span>
	   		<span style="margin-left: 10px;color: #666;">最多上传三张，每张不超过5M</span>
	   </div>
	   <div class="mui-row" id="shee">
	   		<div class="mui-col-xs-3 mui-col-sm-3 shee">
	   			<div><img src="../icon/camera@2x.png" alt="" /></div>
	   		</div>
	   		<template v-for="(item,index) in showimg">
	   			<div class="mui-col-xs-3 mui-col-sm-3">
	   				<span :data-idx="index" class="rmimg"></span>
	   				<div><img :src="item" /></div>
	   			</div>
	   		</template>
	   </div>
	   <div class="colf">投诉联系人</div>
	   <form class="mui-input-group">
	       <div class="mui-input-row">
	           <label>*姓名</label>
	           <input type="text" class="mui-input-clear" v-model="list.name" placeholder="必填" />
	       </div>
	       <!--<div class="mui-input-row">
	           <label>称呼</label>
	           <div class="tebx"><span v-bind:class="list.sex=='先生'?'active':''">先生</span> | <span v-bind:class="list.sex=='女士'?'active':''">女士</span></div>
	       </div>-->
	       <div class="mui-input-row">
	           <label>*手机</label>
	           <input type="text" class="mui-input-clear" v-model="list.mobile" placeholder="手机邮箱二选一" />
	       </div>
	       <div class="mui-input-row">
	           <label>*邮箱</label>
	           <input type="text" class="mui-input-clear" v-model="list.email" placeholder="手机邮箱二选一" />
	       </div>
	   </form>
	   
	   <div class="mui-content-padded">
	   		
	   		<button type="button" class="bexta-btn bexta-btn-red mui-btn mui-btn-block enter">提交</button>
	   		
	   </div>
	   
	</div>
	
<div id="sheet1" class="mui-popover mui-popover-bottom mui-popover-action ">
    <!-- 可选择菜单 -->
    <ul class="mui-table-view">
      <li class="mui-table-view-cell">
        <a href="#" class="callCamera">照相机</a>
      </li>
      <li class="mui-table-view-cell">
        <a href="#" class="callalbum">相册</a>
      </li>
    </ul>
    <!-- 取消菜单 -->
    <ul class="mui-table-view">
      <li class="mui-table-view-cell">
        <a href="#sheet1"><b>取消</b></a>
      </li>
    </ul>
</div>
<script src="../js/mui.js"></script>
<script src="../js/vue.min.js"></script>
<script src="../js/bexta.js"></script>
<script type="text/javascript">
	var apps, views, user;
	mui.init({
		beforeback:function(){
			if( views.opener().id == 'server' ){
				bexta.setStatus(true);
			}
		}
	});
	mui.plusReady(function () {
	   views = bexta.getWebview();
	   user = bexta.getStorage(USER);
	   initVue();
	});
	function initVue(){
		apps = new Vue({
			el:'#vueMain',
			data:{
				showimg:[],
				photo:[],
				list:{
					uid:user.uid,
					order_no:views.order_no,
					content:'',
					name:'',
					sex:'',
					mobile:'',
					email:''
				}
			},
			mounted:function(){
				document.querySelector('.loading').classList.add('loadRun');
				var self = this;
				//删除
	    			mui('#vueMain').on('tap', '.rmimg', function(){
	    				var idx = this.getAttribute('data-idx');
	    				if( idx != '' ){
	    					apps.showimg.splice(idx,1);
						apps.photo.splice(idx,1 );
	    				}
	    			});
				//性别
				mui('#vueMain').on('tap', '.tebx span', function(){
					self.list.sex = this.innerHTML;
				})
				//操作表相关
				mui('#shee').on('tap', '.shee', function(){
					mui('#sheet1').popover('toggle');
				});
				//相机
				mui('#sheet1').on('tap', '.callCamera', function() {
					var self = this;
					bexta.camera(function(entry){
						if( apps.photo.length >= 3 ){
							mui.toast("最多只能上传三张照片");
							return false;
						}
						bexta.uploadImage(function(res){
							jres = JSON.parse(res);
							if( jres.code == 200 ){
								mui.toast('上传成功');
								apps.showimg.push(jres.body.true_url);
								apps.photo.push(jres.body.true_path);
							}
						}, [entry], {type:1}, true);
					},['480px', 'auto']); 
					mui('#sheet1').popover('toggle');
				});
				//相册
				mui('#sheet1').on('tap', '.callalbum', function() {
					bexta.gallery(function(files){
						if( apps.photo.length >= 3 ){
							mui.toast("最多只能上传三张照片");
							return false;
						}
						bexta.uploadImage(function(res){
							jres = JSON.parse(res);
							if( jres.code == 200 ){
								mui.toast('上传成功');
								bexta.jsonToString(jres);
								apps.showimg.push(jres.body.true_url);
								apps.photo.push(jres.body.true_path);
							}
						}, [files], {type:1}, true); 
					}, ['480px', 'auto']);  
					mui('#sheet1').popover('toggle');
				});
				//提交
				mui('#vueMain').on('tap', '.enter', function(){
					if( self.list.content == '' ){
						mui.toast("描述一下,您干嘛投诉呗");
						return ;
					}
					if( self.list.name == '' ){
						mui.toast("告诉我,您的大名");
						return ;
					}
					if( self.list.mobile == '' && self.list.email == '' ){
						mui.toast("手机和邮箱选填一个呗!");
						return ;
					}else{
//						console.log(!self.list.mobile && !check.email(self.list.email))
						if( !self.list.mobile  ){
							if( check.email(self.list.email) ){
								
							}else{
								mui.toast("邮箱格式错了");
								return ;
							}
						}else if(!check.phone(self.list.mobile)){
							mui.toast("手机格式错了");
							return;
							
						}
					}
					
					var send = self.list;
					send['photo'] = self.photo.join(',');
//					bexta.jsonToString(send)
					bexta.ajax(api.order_complaint, function(res,msg){
						mui.toast(msg);
						if( !res ){
							setTimeout(function(){
								mui.back();
							},500);
						}
					},{data:send});
				});
			}
		});
	}
</script>
</body>
</html>